<template>
  <div id="box">
    <!-- 直接引入图片 -->
    <Swiper :list="list" style="width: 800px" @change="change" />
    <!-- 自定义插槽 -->
    <Swiper :list="list2" style="width: 800px; margin-top: 40px">
      <div v-for="(i, index) in list2" :key="index" class="swiper2">
        {{ i }}
      </div>
    </Swiper>
    <a target="_blank" href="https://gitee.com/free_alive/swiper">
      <svg
        t="1710490657135"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1729"
        width="30"
        height="30"
      >
        <path
          d="M512 512m-494.933333 0a494.933333 494.933333 0 1 0 989.866666 0 494.933333 494.933333 0 1 0-989.866666 0Z"
          fill="#C71D23"
          p-id="1730"
        ></path>
        <path
          d="M762.538667 457.045333h-281.088a24.4736 24.4736 0 0 0-24.439467 24.405334v61.098666c-0.034133 13.5168 10.922667 24.439467 24.405333 24.439467h171.1104c13.5168 0 24.439467 10.922667 24.439467 24.439467v12.219733a73.3184 73.3184 0 0 1-73.3184 73.3184h-232.209067a24.439467 24.439467 0 0 1-24.439466-24.439467v-232.174933a73.3184 73.3184 0 0 1 73.3184-73.3184h342.152533c13.482667 0 24.405333-10.922667 24.439467-24.439467l0.034133-61.098666a24.405333 24.405333 0 0 0-24.405333-24.439467H420.352a183.296 183.296 0 0 0-183.296 183.296V762.538667c0 13.482667 10.922667 24.439467 24.405333 24.439466h360.516267a164.9664 164.9664 0 0 0 165.000533-165.000533v-140.526933a24.439467 24.439467 0 0 0-24.439466-24.439467z"
          fill="#FFFFFF"
          p-id="1731"
        ></path>
      </svg>
      <span>gitee</span>
    </a>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Swiper from "./components/swiper.vue";
import img_1 from "./assets/img/img_1.png";
import img_2 from "./assets/img/img_2.png";
const list = ref([img_1, img_2]);
const list2 = ref(["功能一", "功能二"]);
</script>

<style scoped>
#box {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.swiper2 {
  width: 100%;
  flex-shrink: 0;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
a {
  position: fixed;
  bottom: 100px;
  left: calc(50% - 15px);
  display: flex;
  align-items: center;
}
</style>
